<!-- 接口列表 -->

<template>
  <div class="pgTitle">接口地址列表</div>
  <div class="pgCont">
    <ElTable :data="reactiveData.tableData" stripe>
      <ElTableColumn prop="url" label="接口URL"> </ElTableColumn>
      <ElTableColumn prop="params" label="参数">
        <template #default="scope">
          <div class="urlSet">
            <span class="input" ><el-input @input="reactiveData.inputChange(scope.row)" v-model="scope.row.params"></el-input></span>
            <span class="button"><el-button @click="reactiveData.inputSave(scope.row)" :disabled="!scope.row.disabled" :type="scope.row.disabled?'primary':''">保存</el-button></span>
          </div>
        </template>
      </ElTableColumn>
    </ElTable>
  </div>
</template>

<script setup lang="ts">
import {reactive, ref} from 'vue'
import axios from "@/utils/axios";
import IFData from '../mockData/IFListData.json'
import { ElMessage } from 'element-plus'

// table
const reactiveData = reactive({
  tableData: IFData || [],
  pageTotal: 0,
  inputChange(row:any){
    row.disabled = true
  },
  inputSave(row:any){
    // axios.post 保存参数更改，保存成功后提示
    row.disabled = false

    setTimeout(()=>{
      ElMessage.success("保存成功")
    },333)
  },

  initList() {
    axios.get('/user/list', { params: {} }).then((res: any) => {
      if (res.success && res.result) {
        reactiveData.tableData = res.result.list
        reactiveData.pageTotal = res.result.total
      }
    })
  }
})
</script>

<style scoped lang="stylus" >
.urlSet {
  display: flex;
  .input{
    flex: 1; padding-right: 10px;
  }
  .button{
  }
}
</style>
